<template>
  <div class="boxs">
    <!-- 面包屑组件 -->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item>
        <img src="@/assets/user/icon.png" alt="" />
        <span class="span">用户管理</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="span" style="color: #666">认证信息</span>
      </el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- 主体 -->
    <div class="account">
      <!-- 头部-->
      <div class="title">
        <h3>合同信息</h3>
      </div>
      <!-- 空状态 -->
      <div class="null" v-if="!userData">
        <img src="@/assets/shangpiao/组162.png" alt="" />
        <h3>暂无数据记录</h3>
      </div>
      <!-- 表格+分页器 -->
      <transition :name="transitionName" mode="out-in">
        <div class="table" v-if="userData">
          <div class="f3_content_search">
            <div class="f3_content_search_input">
              <span>产品名称</span>
              <el-select class="abc" v-model="acceptorName" placeholder="请选择">
                <el-option key="999" label="全部" value="8918"></el-option>
                <el-option key="1" label="商票贴现融资" value="商票贴现融资"></el-option>
                <el-option key="2" label="商票质押融资" value="商票质押融资"></el-option>
                <el-option key="3" label="银票贴现融资" value="银票贴现融资"></el-option>
                <el-option key="20" label="财票贴现" value="财票贴现"></el-option>
                <el-option key="4" label="关税保函" value="关税保函"></el-option>
                <el-option key="5" label="税信保" value="税信保"></el-option>
                <el-option key="6" label="关税履约保证保险" value="关税履约保证保险"></el-option>
                <el-option key="7" label="关税保证保险" value="关税保证保险"></el-option>
                <el-option key="8" label="关税E保" value="关税E保"></el-option>
              </el-select>
            </div>
          </div>
          <el-table
            v-loading="loading"
            :data="userData"
            border
            highlight-current-row
            stripe
            :header-cell-style="{
              background: '#F1F5FF',
              color: '#4D4D4D'
            }"
          >
            >
            <el-table-column prop="num" label="序号" fixed width="80" align="center">
            </el-table-column>
            <el-table-column prop="conno" label="合同编号" width="270" align="center">
              <template slot-scope="scope">{{ scope.row.conno | getData }}</template>
            </el-table-column>
            <el-table-column prop="singer" label="签订主体" width="370" align="left">
              <template slot-scope="scope">
                <el-popover trigger="click" placement="bottom">
                  <!--  -->
                  <el-table
                    v-loading="loading"
                    v-if="tableData"
                    :data="tableData"
                    border
                    highlight-current-row
                    stripe
                    :header-cell-style="{
                      background: '#EBEDED',
                      color: '#4D4D4D'
                    }"
                  >
                    <el-table-column prop="entname" label="签订主体" width="500" align="center">
                    </el-table-column>
                  </el-table>
                  <!--  -->
                  <div
                    slot="reference"
                    class="name-wrapper"
                    @click="ContractLists(scope.$index, userData)"
                  >
                    {{ scope.row.singer
                    }}<i style="margin-left: 10px" class="el-icon-caret-bottom"></i>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="productname
"
              label="产品名称"
              width="210"
              align="center"
            >
              <template slot-scope="scope">{{ scope.row.productname | getData }}</template>
            </el-table-column>
            <el-table-column prop="conname" label="合同名称" width="165" align="center">
              <template slot-scope="scope">{{ scope.row.conname | getData }}</template>
            </el-table-column>

            <el-table-column prop="contype" label="合同类型" width="125" align="center">
              <template slot-scope="scope">{{ scope.row.contype | getData }}</template>
            </el-table-column>
            <el-table-column prop="signday" label="签订日期" width="165" align="center">
              <template slot-scope="scope">{{ scope.row.signday | getDate }}</template>
            </el-table-column>
            <el-table-column prop="status" label="签署状态" width="125" align="center">
              <template slot-scope="scope">{{ scope.row.status | getData }}</template>
            </el-table-column>
            <el-table-column prop="applyid" label="项目编号" width="200" align="center">
              <template slot-scope="scope">{{ scope.row.applyid | getData }}</template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center" fixed="right">
              <template slot-scope="scope">
                <span
                  class="span"
                  @click="goDetails(scope.$index, userData)"
                  type="text"
                  size="small"
                >
                  查看
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </transition>

      <!-- 分页器 -->
      <div class="pagination" v-if="userData">
        <el-pagination
          background
          layout="prev, pager, next"
          @next-click="nextClick()"
          @prev-click="prevClick()"
          @current-change="handlePageChange"
          :total="pages * 10"
        ></el-pagination>
        <span>共{{ pages }}页</span>
      </div>
    </div>
  </div>
</template>
<script>
import { ContractList, ContractLists } from '@/utils'
export default {
  data() {
    return {
      pageNum: 1, //当前页数
      pageSize: 10, //每页条数
      pages: 1,
      userState: '',
      acceptorName: '',
      acceptorNames: '8918',
      userData: null,
      tableData: null,
      loading: false,
      transitionName: 'slide-left'
    }
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (value == 0) return '0.00'
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return '-'
      let date = value.split(' ')[0]
      return date
    },
    getData: function (value) {
      if (!value || value == '') {
        return '-'
      } else {
        return value
      }
    },
    cutOut: function (value) {
      if (!value) return '-'
      value = value.split('&')[0]
      return value
    }
  },
  mounted() {
    this.getContractList()
  },
  watch: {
    // 监听page的变化
    pageNum() {
      this.getContractList()
    },
    acceptorName() {
      this.acceptorNames = this.acceptorName
      this.pageNum = 1
      this.getContractList()
    }
  },
  methods: {
    // 点击下一页
    nextClick() {
      this.pageNum += 1
      this.getContractList()
    },
    // 点击上一页
    prevClick() {
      this.pageNum -= 1
      this.getContractList()
    },
    // 点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage
      this.getContractList()
    },
    // 获取合同信息列表
    async getContractList() {
      this.loading = true
      let pageNum = this.pageNum
      let pageSize = this.pageSize
      let productname = this.acceptorNames
      let data = await ContractList(pageNum, pageSize, productname)
      if (data.data) {
        this.loading = false
        this.userData = data.data.list
        for (let i = 0; i < this.userData.length; i++) {
          this.userData[i].num = (this.pageNum - 1) * 10 + i + 1
          this.userData[i].singer = this.userData[i].singer.split('、')[0]
        }
        this.pages = data.data.pages
      }
    },
    // 点击签订主体
    async ContractLists(index, row) {
      this.loading = true
      let id = row[index].id
      let list = []
      let data = await ContractLists(id)
      if (data.code == 100) {
        list.push(data.data)
        this.tableData = list
        this.tableData[0].entname = list[0].entname.replace('&', '、')
        setTimeout(() => {
          this.loading = false
        }, 1000)
      }
    },
    //
    async goDetails(index, row) {
      let fileUrl = row[index].filepath
      if (!fileUrl) return this.$Message.error('暂无合同')
      const a = document.createElement('a')
      a.href = fileUrl
      a.target = '_blank'
      a.click()
    }
  }
}
</script>

<style lang="scss" scoped>
.boxs {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // 面包屑
  .breadcrumb {
    display: flex;
    align-items: center;
    height: 0.3958rem;
    font-size: 0.0833rem;
    background-color: rgb(242, 244, 247);
    .icon {
      margin: 0 0.0521rem 0 0.0208rem;
    }
    .span {
      font-size: 0.0833rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #999999;
    }
    img {
      width: 0.0938rem;
      height: 0.0938rem;
      margin-right: 0.026rem;
    }
  }
  .account {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(196, 196, 196, 0.15);
    border-radius: 6px;
    padding: 0.2604rem;
    // height: 1460px;
    // 标题
    .title {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 25px;
      h3 {
        font-size: 22px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #222222;
      }
    }
  }
  // 空状态
  .null {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 150px;
    img {
      width: 326px;
      height: 212px;
    }
    h3 {
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #b3b3b3;
    }
  }
  .f3_content_search {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0.2604rem 0 0.1823rem 0;
    .f3_content_search_input {
      display: flex;
      align-items: center;
      input {
        position: relative;
        box-sizing: border-box;
        height: 43px;
        width: 315px;
        font-size: 14px;
        border: 1px solid #e0e0e0;
        padding: 0.0521rem 0.0521rem;
        color: #606266;
        outline: 0;
      }
      span {
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #737373;
        margin-right: 0.0521rem;
        font-size: 0.0833rem;
      }
    }
  }
  // 表格
  .table {
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    cursor: pointer;
    overflow: auto;
    .span {
      display: inline-block;
      // width: 30px;
      height: 24px;
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #3f6ef2;
      margin-right: 5px;
      border-bottom: 1px solid #3f6ef2;
      cursor: pointer;
    }
    .state-bar {
      span {
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #606266;
        margin-right: 10px;
      }
    }
  }
  // 分页器
  .pagination {
    display: flex;
    padding: 20px 30px 10px 10px;
    justify-content: right;
    span {
      font-size: 16px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #666666;
      margin-top: 2px;
    }
  }
}
// 切换过渡
.slide-left-enter {
  opacity: 0;
  -webkit-transform: translate(100px, 0px);
  transform: translate(-100px, 0px);
}
.slide-left-enter-active {
  transition: all 0.5s linear;
}
.slide-left-leave-to {
  opacity: 0;
  -webkit-transform: translate(-100px, 0px);
  transform: translate(100px, 0px);
}
.slide-left-leave-active {
  transition: all 0.5s linear;
}
// 切换过渡
.fade-enter {
  opacity: 0;
}

.fade-leave {
  opacity: 1;
}

.fade-enter-active {
  transition: opacity 0.3s;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.3s;
}
::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}
::v-deep .el-icon-caret-bottom:before {
  content: '\e790';
  color: #999;
}
/* 下拉选择器 */
::v-deep .el-input__inner {
  border-radius: 0px;
  padding: 0 0.0781rem;
  height: 0.2083rem;
  width: 1.6406rem;
}
::v-deep .el-input__inner {
  &::placeholder {
    font-size: 0.0833rem;
    font-family: 'Microsoft YaHei';
  }
  color: #555;
  font-family: 'Microsoft YaHei';
  font-size: 15px !important;
}
/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 0.0833rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0833rem;
  }
  .el-table__body-wrapper {
    overflow: auto;
    height: calc(100% - 85px);

    &::-webkit-scrollbar {
      width: 0; /* 纵向滚动条 宽度 */
      height: 0.0781rem; /* 横向滚动条 高度 */
    }
    &::-webkit-scrollbar-thumb {
      width: 0.0521rem; /* 横向滚动条 宽度 */
      height: 0.0781rem; /* 纵向滚动条 高度 */
      background-color: rgb(167, 164, 164);
    }
  }
}
</style>
<style lang="scss">
/* 分页器 */
.el-pagination.is-background .el-pager li {
  border-radius: 20px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
.el-pagination {
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 16px;
    font-weight: 400;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      font-size: 16px;
    }
  }
  .cell {
    font-size: 16px;
  }
}

.el-table tr {
  height: 40px;
}
.el-table .el-table thead {
  height: 40px;
}
.el-button--small {
  padding: 0;
}
.el-select-dropdown__item {
  font-size: 16px;
}
</style>
